<template>
  <div class="personalContainer">
  <div class="user-section">
    <div class="back" >
      <i class="iconfont icon-zuojiantou" @click="$router.push('/home')"></i>
    </div>
    <img class="bg" src="@/assets/personal/bgImg2.jpg">
    <div class="user-info-box">
      <div class="portrait-box">
        <img class="portrait" src='@/assets/personal/missing-face.png'>
      </div>
      <div class="info-box">
        <text class="username">xxx</text>
      </div>
    </div>
    <div class="vip-card-box">
      <img class="card-bg" src="@/assets/personal/vip-card-bg.png">
      <div class="b-btn">
        立即开通
      </div>
      <div class="tit">
        <!-- 会员图标-->
        <text class="iconfont icon-huiyuan-"></text>
        硅谷会员
      </div>
      <text class="e-m">atguigu Union</text>
      <text class="e-b">开通会员听歌, 撸代码</text>
    </div>
  </div>
  <div class="cover-container">
    <img class="arc" src="@/assets/personal/arc.png">
    <!-- 个人中心导航 -->
    <div class="nav-section">
      <div class="nav-item">
        <text class="iconfont icon-xiaoxi"></text>
        <text>我的消息</text>
      </div>
      <div class="nav-item">
        <text class="iconfont icon-31haoyou"></text>
        <text>我的好友</text>
      </div>
      <div class="nav-item">
        <text class="iconfont icon-gerenzhuye"></text>
        <text>个人主页</text>
      </div>
      <div class="nav-item">
        <text class="iconfont icon-gexingzhuangban"></text>
        <text>个性装扮</text>
      </div>
    </div>
    <!-- 个人中心列表 -->
    <div class="personalContent">
      <div class="recentPlayContainer">
        <text class="title">最近播放</text>
        <!-- 最近播放记录 -->
          <div class="recentItem">
           <!-- <img src=""></img> -->
          </div>
        <div class="playRecord">暂无播放记录</div>
      </div>
      <!-- 卡片图 -->
      <div class="cardList">
        <div class="card-item">
          <text class="title">我的音乐</text>
          <text class="more"> > </text>
        </div>
        <div class="card-item">
          <text class="title">我的收藏</text>
          <text class="more"> > </text>
        </div>
        <div class="card-item">
          <text class="title">我的电台</text>
          <text class="more"> > </text>
        </div>
      </div>
    </div>
  </div>
 </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.personalContainer {
  width: 7.5rem;
  height: 100vh;
  // 上方用户区域
  .user-section {
  height: 8rem;
  position: relative;
  padding: 1.3rem 0.3rem 0;
  .back{
    position: absolute;
    z-index:100;
    left:0.1rem;
    top:0.1rem;
    .iconfont{
      font-size:0.6rem;
      color:#fff;
    }
  }
  //背景图
  .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  filter: blur(1px);
  }
  //用户头像
  .user-info-box{
  height: 1.8rem;
  display:flex;
  align-items:center;
  position:relative;
  z-index: 1;
   .portrait{
  width: 1.3rem;
  height: 1.3rem;
  border:0.05rem solid #fff;
  border-radius: 50%;
   }
   .username{
  font-size: 24;
  color: #303133;
  margin-left: 0.2rem;
   }
  }
  //vip区域
  /* vip-box */
  .vip-card-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to left, red, black);
  background: rgba(0, 0, 0, .7);
  height: 4.8rem;
  color: #f7d680;
  border-radius: 0.16rem 0.16rem 0 0;
  padding: 0.2rem 0.24rem;
   .card-bg{
  position:absolute;
  top: 0.2rem;
  right: 0;
  width: 3.8rem;
  height:2.6rem;
  }
  .b-btn{
  position: absolute;
  right: 0.2rem;
  top: 0.16rem;
  width: 1.32rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.22rem;
  color: #36343c;
  border-radius: 0.2rem;
  background: #f9e6af;
  z-index: 1;
  }
  .tit {
  font-size: 0.22rem;
  color: #f7d680;
  margin-bottom: 0.28rem;
  .iconfont{
  color: #f6e5a3;
  margin-right: 0.16rem;
}
  }
  .e-m{
  font-size: 0.34rem;
  margin-top: 0.1rem;
  }
  .e-b{
  font-size: 0.24rem;
  color: #d8cba9;
  margin-top: 0.1rem;
  }
  }
 }

  // 下方导航区域
  .cover-container{
  margin-top: -1.5rem;
  padding: 0 0.3rem;
  position:relative;
  background: #f5f5f5;
  padding-bottom: 0.2rem;
  .arc{
  position:absolute;
  left: 0;
  top: -0.34rem;
  width: 100%;
  height:0.36rem;
  }
  //个人中心导航
  .nav-section {
  display: flex;
  background: #fff;
  padding: 0.2rem 0;
  border-radius: 0.15rem;
  .nav-item {
  width: 25%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text:last-child {
  font-size: 0.22rem;
  }
  .iconfont {
  font-size: 50rpx;
  color: #d43c33;
  line-height: 70rpx;
  }
 }
  }

  .personalContent {
   background: #fff;
   margin-top: 0.2rem;
   .recentPlayContainer{
       .title {
      padding-left: 0.2rem;
      font-size: 0.26rem;
      color: #333;
      line-height: 0.8rem;
     }
     .playRecord{
       padding-left:0.2rem;
     }
   }
   .cardList {
  margin-top: 0.2rem;
  .card-item{
  border-top: 1px solid #eee;
  height: 1.2rem;
  line-height: 1.2rem;
  padding: 0.2rem;
  font-size: 0.3rem;
  color: #333;
  display: flex;
  align-items: center;
   .more {
   float: right;
   }
 }
  }

  }
 }
}
</style>